<template>
    <div class="order-list-item">
        <div class="order-list-item-l1 van-hairline--bottom" @click.stop="handleRouteToStore">
            <div class="order-list-item-store">
                <van-icon name="shop-o" :size="20"/>
                <span class="order-list-item-store-name">{{order.storeName}}</span>
                <van-icon name="arrow"/>
            </div>
            <div class="order-list-item-status">{{statusLabel}}</div>
        </div>
        <white-space/>
        <order-item v-for="item in order.items" :key="item.id" :item="item" @click.stop="handleRouteToOrder"/>
        <div class="order-list-item-amounts">
            <div class="subtotal-amount">
                <span class="amount-label">总价</span>
                <price :value="order.subtotalAmount" :size="16"/>
            </div>
            <div class="total-discount-amount">
                <span class="amount-label">优惠</span>
                <price :value="Math.abs(order.totalDiscountAmount)" :size="16"/>
            </div>
            <div class="total-amount">
                <span class="amount-label">实付款</span>
                <price :value="order.totalAmount" color="#000" :size="16"/>
            </div>
        </div>
        <white-space/>
        <div class="van-hairline--top order-list-item-actions">
            <order-actions :order="order" @receipt="$emit('receipt')" @cancel="$emit('cancel')"/>
        </div>
    </div>
</template>

<script>
  import { order } from "@mall/api-services"
  import OrderItem from "@/components/order/OrderItem"
  import { getStatusLabel } from "@/utils/order"
  import { Button, Icon } from "vant"
  import WhiteSpace from "@/components/WhiteSpace"
  import Price from "@/components/Price"
  import OrderActions from "@/components/order/OrderActions"

  export default {
    name: "OrderListItem",
    components: {
      OrderActions,
      Price,
      WhiteSpace,
      OrderItem,
      [Button.name]: Button,
      [Icon.name]: Icon,
    },
    props: {
      order: order.Order,
    },
    computed: {
      statusLabel() {
        const { order } = this
        return getStatusLabel(order.status)
      },
      totalDiscountAmount() {
        const { order } = this
        const { totalDiscountAmount, totalDiscountShippingCost } = order
        return totalDiscountAmount + totalDiscountShippingCost
      },
    },
    methods: {
      handleRouteToStore() {
        const { order } = this
        this.$router.push(`/stores/${order.storeId}`)
      },
      handleRouteToOrder() {
        const { order } = this
        this.$router.push(`/orders/${order.id}`)
      },
    },
  }
</script>

<style lang="scss" scoped>
    @import "../../styles/variables";

    .order-list-item {
        background: #fff;
        margin-bottom: 9px;
    }

    .order-list-item-l1 {
        padding: 9px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1rem;

        .order-list-item-store {
            display: inline-flex;
            align-items: center;

            .order-list-item-store-name {
                margin-left: 4px;
                font-weight: 700;
                line-height: 1rem;
            }
        }

        .order-list-item-status {
            font-size: 13px;
            color: $danger-color;
        }
    }

    .order-list-item-amounts {
        display: flex;
        justify-content: flex-end;
        padding: 0 9px;

        .amount-label {
            margin-right: 4px;
            font-size: 14px;
        }

        .subtotal-amount, .total-discount-amount, .total-amount {
            display: inline-flex;
            align-items: flex-end;

        }

        .subtotal-amount, .total-discount-amount, {
            color: $gray-6;
            margin-right: 9px;

            .price {
                color: $gray-6;;
            }
        }
    }

    .order-list-item-actions {
        padding: 9px;
        display: flex;
        justify-content: flex-end;

        .van-button {
            margin-left: 9px;
            width: 72px;
        }
    }
</style>
